<template>
	<div class="image-show">
		<el-button type="text" icon="el-icon-view" @click="visible = true">查看文件</el-button>

		<el-dialog :visible.sync="visible">
			<div class="file-item" v-for="(item, index) in srcsArr" :key="index">
				<div class="name">
					{{ item.name }}
				</div>
				<el-button v-if="hasPreview(item.url)" type="text" icon="el-icon-view" @click="onPreviewFile(item)"></el-button>
				<a :download="item.name" :href="item.url" target="_blank">
					<el-button type="text" icon="el-icon-download"></el-button>
				</a>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="fileVisible" :title="title">
			<iframe v-if="type == 'pdf'" :src="src" frameborder="0" style="width: 100%;height: 500px;"></iframe>
			<el-image
				v-else-if="type == 'image'"
				:preview-src-list="[src]"
				:src="src"
				style="width: 500px;height: 500px; object-fit: cover; display: block; margin: auto;"
			></el-image>
			<video
				v-else-if="type == 'video'"
				controls
				style="width: 100%;height: 500px; object-fit: cover display: block; margin: auto;"
				:src="src"
			></video>
			<audio v-else-if="type == 'audio'" controls style="display: block; margin: auto;" :src="src"></audio>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "image-show",
	props: {
		srcs: {
			type: String,
			default: () => [],
		},
	},
	data() {
		return {
			visible: false,
			fileVisible: false,
			title: "",
			type: "",
			src: "",
		}
	},
	computed: {
		srcsArr() {
			try {
				return JSON.parse(this.srcs)
			} catch (error) {
				return []
			}
		},
	},
	methods: {
		onPreviewFile(item) {
			const type = item.name.split(".").pop()
			switch (type) {
				case "pdf":
					this.title = item.name
					this.fileVisible = true
					this.type = "pdf"
					this.src = item.url
					break

				case "jpg":
				case "jpeg":
				case "png":
				case "gif":
				case "webp":
					this.title = item.name
					this.fileVisible = true
					this.type = "image"
					this.src = item.url
					break

				case "mp4":
				case "avi":
				case "mov":
				case "rmvb":
				case "rm":
				case "flv":
				case "3gp":
				case "wmv":
				case "mkv":
					this.title = item.name
					this.fileVisible = true
					this.type = "video"
					this.src = item.url
					break

				case "mp3":
				case "wav":
				case "wma":
				case "ogg":
				case "aac":
					this.title = item.name
					this.fileVisible = true
					this.type = "audio"
					this.src = item.url
					break

				case "xls":
				case "xlsx":
				case "ppt":
				case "pptx":
				case "doc":
				case "docx":
				case "txt":
				default:
					window.open(item.url)
					break
			}
		},
		hasPreview(url) {
			const ext = url.split(".").pop()
			return [
				"pdf",
				"jpg",
				"jpeg",
				"webp",
				"png",
				"gif",
				"mp4",
				"avi",
				"mov",
				"rmvb",
				"rm",
				"flv",
				"3gp",
				"wmv",
				"mkv",
				"mp3",
				"wav",
				"wma",
				"ogg",
				"aac",
			].includes(ext)
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f5f5f5;
	border-radius: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 10px;
	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
	}
}
</style>
